<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script src="./js/echarts/echarts.5.0.0.js"></script>
		<script src="./js/echarts/theme/shine.js"></script>
		<title>EChartd-timeline</title>
	</head>
	<style>
		#chart {
			width: 800px;
			height: 400px;
			display: inline-block;
		}
	</style>
	<body>
		<div id="chart"></div>
	</body>
	<script>
		echarts.init(document.getElementById('chart')).setOption({
			timeline: {
				axisType: 'category', // 坐标轴类型
				realtime: true, // 拖动时是否实时渲染视图
				rewind: false, // 是否启动反向播放，需要将loop置为true
				loop: true, // 是否循环播放
				autoPlay: true, // 是否自动播放
				inverse: false, // 反向置放timeline
				currentIndex: 0, // 起始位置
				playInterval: 1000, // 播放间隔
				controlStyle: {
					// 播放控制器位置
					position: 'left',
				},
				data: ['2002-01-01', '2003-01-02'],
			},
			baseOption: {
				tooltip: {
					trigger: 'axis', // hover触发器
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
						shadowStyle: {
							color: 'rgba(150,150,150,0.1)', //hover颜色
						},
					},
				},
			},
			options: [
				{
					title: {
						text: 'ECharts多个刻度案例1',
					},
					xAxis: {
						data: ['2012', '2013', '2014', '2015'],
					},
					yAxis: {},
					series: {
						type: 'bar',
						data: [100, 120, 90, 150],
					},
				},
				{
					title: {
						text: 'ECharts多个刻度案例2',
					},
					xAxis: {
						data: ['2012', '2013', '2014', '2015'],
					},
					yAxis: {},
					series: {
						type: 'bar',
						data: [10, 10, 90, 50],
					},
				},
			],
		});
	</script>
</html>
